<template>
	<view>
		<view class="attr-picker" v-if="data.show_attr_picker">
    <view class="content-box">
        <view class="flex-row" style="border-bottom: 1upx solid #e3e3e3;padding: 24upx 28upx">
            <view class="flex-grow-0">
                <view class="goods-pic-box">
                    <image @tap="$emit('previewImage',$event)" :data-url="data.goods.attr_pic" mode="aspectFill" :src="data.goods.attr_pic" v-if="data.goods.attr_pic"></image>
                    <image @tap="$emit('previewImage',$event)" :data-url="data.goods.cover_pic" mode="aspectFill" :src="data.goods.cover_pic" v-else></image>
                </view>
            </view>
            <view class="flex-grow-1" style="padding: 0 24upx">
                <view style="color:#ff4544;margin-bottom: 12upx;font-weight: bold" v-if="data.pageType==='INTEGRAL'">
                    <block v-if="data.status=='attr'">
                            {{data.attr_integral}}积分
                            <block v-if="data.attr_price>0">+￥{{data.attr_price}}</block>
                    </block>
                    <block v-else>
                            {{data.goods.integral}}积分
                            <block v-if="data.goods.price>0">+￥{{data.goods.price}}</block>
                    </block>
                </view>
                <block v-else-if="data.pageType==='STEP'">
                    <view style="color:#ff4544;margin-bottom: 12upx;font-weight: bold">
                      {{data.goods.price}}{{data.dapp.option.step.currency_name?data.dapp.option.step.currency_name:'活力币'}}
                    </view>
                    <view style="font-size:9pt">
                        库存{{data.goods.num}}
                    </view>
                </block>
                <block v-else>
                    <view style="color:#ff4544;margin-bottom: 12upx;font-weight: bold" v-if="data.pageType==='PINTUAN'">
                            ￥{{data.groupNum?data.goods.group_price:data.goods.single_price}}
                            <text class="is_member_price" v-if="data.goods.is_member_price===true&&data.groupNum===true">会员价</text>
                    </view>
                    <view style="color:#ff4544;margin-bottom: 12upx;font-weight: bold" v-else>￥{{data.goods.price}}
                            <text class="is_member_price" v-if="data.goods.is_member_price===true">会员价</text>
                    </view>
                    <view style="font-size:9pt">
                        库存{{data.goods.num}}
                    </view>
                </block>
            </view>
            <view class="flex-grow-0">
                <view @tap="$emit('hideAttrPicker',$event)" class="flex-x-center flex-y-center" style="width: 100upx;height: 100upx">
                    <image :src="data.__wxapp_img.dapp.close.url" style="width: 30upx;height: 30upx"></image>
                </view>
            </view>
        </view>
        <scroll-view scrollY="true" style="max-height: 650upx;">
            <view style="padding: 24upx 28upx">
                <view>
                    <view class="attr-group" v-if="data.groupNum&&!data.oid">
                        <view class="attr-group-name">{{data.attr_group_num.attr_group_name}}</view>
                        <view class="attr-list">
                            <text @tap="$emit('groupCheck',$event)" :class="['attr-item',data.group_checked?'':'active']">{{data.goods.group_num}}人团</text>
                            <text @tap="$emit('attrNumClick',$event)" :class="['attr-item',item.checked?'active':'']" :data-id="item.id" v-if="data.attr_group_num.attr_list.length>0" v-for="(item,index) in data.attr_group_num.attr_list" :key="item.id">{{item.group_num}}人团
                            </text>
                        </view>
                    </view>
                    <view class="attr-group" v-if="attr_group.attr_list.length>0" v-for="(attr_group,index) in data.attr_group_list" :key="attr_group.id">
                        <view class="attr-group-name">{{attr_group.attr_group_name}}</view>
                        <view class="attr-list">
                            <text @tap="$emit('dappAttrClick',$event)" :class="['attr-item', item.checked?'active':'', item.attr_num_0?'attr_num_0':'']" :data-group-id="attr_group.attr_group_id" :data-id="item.attr_id" v-for="(item,i) in attr_group.attr_list" :key="item.id">{{item.attr_name}}</text>
                        </view>
                    </view>
                </view>
                <view style="height: 0;border-bottom: 1upx solid #e3e3e3;margin-bottom: 40upx"></view>
                <view style="padding-bottom: 40upx" v-if="data.pageType!=='INTEGRAL'&&data.pageType!=='BOOK'">
                    <view class="flex-row flex-y-center mb-20">
                        <view class="flex-grow-1">数量</view>
                        <view class="flex-grow-0">
                            <view class="flex-row number-input-box">
                                <view @tap="$emit('numberSub',$event)" :class="['flex-grow-0 flex-x-center flex-y-center number-btn number-sub', data.form.number<=1?'disabled':'']" style="margin-right:0.01rem;">-
                                    </view>
                                <view class="flex-grow-0">
                                    <input @blur="$emit('numberBlur',$event)" class="flex-grow-1 number-input" min="1" step="1" style="padding:0" type="number" :value="data.form.number"></input>
                                </view>
                                <view @tap="$emit('numberAdd',$event)" class="flex-grow-0 flex-x-center flex-y-center number-btn number-add">+
                                    </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</view>

	</view>
</template>
<script>var myVue = {};
	export default {
		props:['data']
	}
</script>
<style scoped>
.attr-picker {
    position: fixed;
    bottom: calc(110upx + var(--window-bottom));
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
}

.attr-picker .content-box {
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: calc(110upx + var(--window-bottom));
}

.attr-picker .attr-group {
    margin-bottom: 6upx;
}

.attr-picker .attr-group-name {
    margin-bottom: 20upx;
}

.attr-picker .attr-item {
    display: inline-block;
    margin: 0 30upx 30upx 0;
    background: #f7f7f7;
    border-radius: 10upx;
    padding: 15upx 30upx;
}

.attr-picker .attr-item.active {
    background: #ff4544;
    color: #fff;
}

.attr-picker .goods-pic-box {
    position: relative;
    width: 200upx;
}

.attr-picker .goods-pic-box image {
    position: absolute;
    top: -90upx;
    border: 5upx solid #fff;
    width: 200upx;
    height: 200upx;
    border-radius: 5upx;
    box-shadow: 0 1upx 2upx rgba(0,0,0,.2);
}

.attr-picker .attr_num_0 {
    color: #c5c5c5;
}

.attr-picker .number-input-box {
    height: 70upx;
}

.attr-picker .number-input-box .number-input {
    height: 70upx!important;
    border: none;
    text-align: center;
    width: 120upx;
    background: #eee;
    margin: 0 4upx!important;
}

.attr-picker .number-input-box .number-btn {
    height: 100%!important;
    width: 70upx;
    background: #eee;
}

.attr-picker .number-input-box .number-btn.disabled {
    background: #f6f6f6;
    color: #aaa;
}

.attr-picker .is_member_price {
    font-size: 7pt;
}
</style>